@use "~/styles/variables.scss" as *;

.report-page {
    height: 100vh;
    .report-page-header {
        font-weight: 500;
    }
    .page-body {
        overflow: auto;
        .report-card {
            width: 700rpx;
            margin: 25rpx; 
            border-radius: 25rpx;
            box-sizing: border-box;
            padding: 25rpx;
            .report-item {
                margin-bottom: 20rpx;
                overflow: hidden;
                .account-name {
                    align-items: baseline;
                }
                .report-val-title {
                    padding: 10rpx 0 20rpx;
                }
                .report-item-title {
                    padding: 10rpx 0;
                    font-weight: 500;
                    .btn {
                        color: $color-primary;
                    }
                }
                .report-item-val {
                    padding: 10rpx 0;
                }
                .report-item-bill {
                    padding: 10rpx;
                    .bill-count {
                        margin: 0 20rpx;
                    }
                }
                .icon-icon-question {
                    padding: 10rpx;
                }
                .engel-progress-container {
                    width: 100%;
                    height: 30rpx;
                    line-height: 30rpx;
                    background: #cccccc;
                    margin: 20rpx 0 40rpx;
                    position: relative;
                    .engel-progress-bar {
                        width: 100%;
                        height: 20rpx;
                        position: absolute;
                        top: -24rpx;
                        left: 0;
                        z-index: 1;
                        .iconfont {
                            position: relative;
                            left: -9rpx;
                        }
                    }
                    .engel-progress-val {
                        text-align: center;
                    }
                    .flex60_100 {
                        flex: 40;
                        background: rgba(250, 81, 3, 0.2);
                    }
                    .flex50_60 {
                        flex: 10;
                        background: rgba(250, 81, 3, 0.4);
                    }
                    .flex40_50 {
                        flex: 10;
                        background: rgba(250, 81, 3, 0.6);
                    }
                    .flex30_40 {
                        flex: 10;
                        background: rgba(250, 81, 3, 0.8);
                    }
                    .flex0_30 {
                        flex: 30;
                        background: rgba(250, 3, 3, 1);
                    }
                }
            }
        }
    }
    .modal-body {
        padding: 12rpx;
        .tip-Text {
            padding: 12rpx;
        }
    }
}